
<template>
  <!--        具体内容列表  -->
  <div class="input-bottom-dialogue specifics" >

    <!--            右侧对话框-->
    <div class="input-bottom-dialogue-container">
      <div class="input-bottom-dialogue-container-box">
        <div class="container-box">
          <div> 用户语音输入的内容.....</div>
        </div>
      </div>
    </div>
    <!--            头像-->
    <div style="margin-left: 14px;">
      <img style="width: 60px;height: 60px;" src="@/assets/images/notLoggedIn/user_image.png"></img>
    </div>
  </div>
</template>
<script setup>

</script>
<style scoped lang="scss">
//景点对话框
.input-bottom-dialogue{
  display: flex;
  .input-bottom-dialogue-container{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 90px;
    background: #EDDDCD;
    border-radius: 10px 10px 10px 10px;
    width: calc(100% - 20px);
    .input-bottom-dialogue-container-box{
      width: calc(100% - 40px);
      height: calc(100% - 40px);
      position: relative;
      .container-box{
        display: flex;
        justify-content: space-between;
        height: 16px;
        font-family: DingliesongtypefaceRegular;
        font-weight: 400;
        font-size: 16px;
        color: #9B6548;
        text-align: left;
        font-style: normal;
        text-transform: none;
      }
      .category-list{
        display: flex;
        margin-top: 16px;
        .category-list-item{
          cursor: pointer;
          margin-left: 8px;
          font-weight: 400;
          font-size: 14px;
          color: #9B6548;
          text-align: left;
          font-style: normal;
          text-transform: none;
          font-family: DingliesongtypefaceRegular;
          height: 22px;
          background: #F5ECE2;
          border-radius: 6px 6px 6px 6px;
          line-height: 22px;
          .category-list-item-title{
            padding: 0 5px;
          }
        }
        .active-category-list-item{
          cursor: pointer;
          margin-left: 8px;
          font-weight: 400;
          font-size: 14px;
          color: #FFFFFF;
          text-align: left;
          font-style: normal;
          text-transform: none;
          font-family: DingliesongtypefaceRegular;
          height: 22px;
          background: #9B6548;
          border-radius: 6px 6px 6px 6px;
          line-height: 22px;
          .category-list-item-title{
            padding: 0 5px;
          }
        }

      }
      .select-list-box{
        background-color: #FFFFFF;
        position: absolute;
        right: 0;
        top:40px;
        width: 100px;
        height: 208px;
        z-index: 2000;
        overflow: auto;
        .select-list-box-group{
          display: flex;
          justify-content: center;
          .un-select-list-box-item{
            cursor: pointer;
            width: 60px;
            height: 30px;
            border-radius: 100px 100px 100px 100px;
            color: #AC6117;
            text-align: center;
            margin-top: 16px;
            font-family: DingliesongtypefaceRegular;
            font-weight: 400;
            font-size: 14px;
            line-height: 14px;
            font-style: normal;
            text-transform: none;
            line-height: 30px;
          }
          .un-select-list-box-item:hover{
            cursor: pointer;
            width: 60px;
            height: 30px;
            background: #F5ECE2;
            border-radius: 100px 100px 100px 100px;
            color: #AC6117;
            text-align: center;
            margin-top: 16px;
            font-family: DingliesongtypefaceRegular;
            font-weight: 400;
            font-size: 14px;
            line-height: 14px;
            font-style: normal;
            text-transform: none;
            line-height: 30px;
          }
        }

      }
    }

  }
}
//  景点内容具体
.specifics{
  margin-top: 20px;
}
</style>